import type { DeckDetail, DeckInfoCardItem } from '/@/api/currentDeck/model/deckModel';
import { defineComponent, reactive, ref } from 'vue';
import setting from '/@/settings/projectSetting';
import { awaitWrap } from '/@/utils';
import { DeckDetailApi } from '/@/api/currentDeck/deck';
import { find } from 'lodash-es';

import('./OPcardsPage.less');

export default defineComponent({
  name: 'OPcardsPage',
  props: {
    deckId: {
      type: Number as PropType<number>,
      required: true,
    },
  },
  setup(props) {
    const mainCardList = reactive<DeckInfoCardItem[]>([]);
    const deckDetailInfo = reactive<DeckDetail>({} as DeckDetail);
    const loadingState = ref(true);
    const getDetail = async () => {
      const [error, data] = await awaitWrap(DeckDetailApi({ deck_id: Number(props.deckId) }));
      if (error) {
        return false;
      }
      const result = data as DeckDetail;
      for (const item in result) {
        deckDetailInfo[item] = result[item];
      }
      for (const cards of result.deck_info) {
        if (cards.group_name !== '领袖') {
          mainCardList.push(...cards.card_list);
        }
      }
      loadingState.value = false;
    };
    getDetail();

    const MainTable1 = () => {
      if (loadingState.value) {
        return null;
      }
      const TrArray: VueNode = [];
      for (let i = 0; i < 25; i++) {
        if (mainCardList[i]) {
          TrArray.push(
            <tr>
              <td>
                <div>{i + 1}</div>
              </td>
              <td>
                <div>{mainCardList[i].card_no}</div>
              </td>
              <td>
                <div>{mainCardList[i].name}</div>
              </td>
              <td>
                <div>{mainCardList[i].number}</div>
              </td>
            </tr>
          );
        } else {
          TrArray.push(
            <tr>
              <td>
                <div>{i + 1}</div>
              </td>
              <td>
                <div></div>
              </td>
              <td>
                <div></div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
          );
        }
      }
      return (
        <table class='table1'>
          <tr class='table-title'>
            <td>排序</td>
            <td>编号</td>
            <td>名称</td>
            <td>数量</td>
          </tr>
          {TrArray}
        </table>
      );
    };

    const MainTable2 = () => {
      if (loadingState.value) {
        return null;
      }
      const TrArray: VueNode = [];
      for (let i = 25; i < 50; i++) {
        if (mainCardList[i]) {
          TrArray.push(
            <tr>
              <td>
                <div>{i + 1}</div>
              </td>
              <td>
                <div>{mainCardList[i].card_no}</div>
              </td>
              <td>
                <div>{mainCardList[i].name}</div>
              </td>
              <td>
                <div>{mainCardList[i].number}</div>
              </td>
            </tr>
          );
        } else {
          TrArray.push(
            <tr>
              <td>
                <div>{i + 1}</div>
              </td>
              <td>
                <div></div>
              </td>
              <td>
                <div></div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
          );
        }
      }
      return (
        <table>
          <tr class='table-title'>
            <td>排序</td>
            <td>编号</td>
            <td>名称</td>
            <td>数量</td>
          </tr>
          {TrArray}
        </table>
      );
    };

    const LeaderTable = () => {
      if (loadingState.value) {
        return null;
      }
      const { deck_info } = deckDetailInfo;
      const groupDate = find(deck_info, { group_name: '领袖' });
      let sIndex = '';
      let name = '';
      if (groupDate && groupDate.card_list?.length) {
        name = groupDate.card_list[0].name;
        sIndex = groupDate.card_list[0].card_no || '';
      }
      return (
        <table class={'basic-table'}>
          <tr>
            <td colspan={2}>
              <div>领袖卡牌</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>编号</div>
            </td>
            <td>
              <div>名称</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>{sIndex}</div>
            </td>
            <td>
              <div>{name}</div>
            </td>
          </tr>
        </table>
      );
    };

    const NumsTable = () => {
      if (loadingState.value) {
        return null;
      }
      const { deck_info } = deckDetailInfo;
      const groupDate1 = find(deck_info, { group_name: '角色' });
      const groupDate2 = find(deck_info, { group_name: '事件' });
      const groupDate3 = find(deck_info, { group_name: '场地' });
      return (
        <table class={'basic-table'} style={{ marginTop: '25px' }}>
          <tr>
            <td>
              <div>角色卡总数量：</div>
            </td>
            <td>
              <div>{groupDate1?.card_number}</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>事件卡总数量：</div>
            </td>
            <td>
              <div>{groupDate2?.card_number}</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>舞台卡卡总数量：</div>
            </td>
            <td>
              <div>{groupDate3?.card_number}</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>主卡组总数量：</div>
            </td>
            {/*@ts-ignore*/}
            <td>{groupDate1?.card_number + groupDate2?.card_number + groupDate3?.card_number}</td>
          </tr>
        </table>
      );
    };

    const RefereeTable = () => {
      return (
        <table class={'referee-table'}>
          <tr class={'r-title'}>
            <td colspan={2}>
              <div>裁判区域</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>是否有警告：</div>
            </td>
            <td>
              <div>警告次数:</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>是否有小局判负：</div>
            </td>
            <td>
              <div>单轮判负次数：</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>卡表是否有出入：</div>
            </td>
            <td rowspan={3}>
              <div class={'remark'}>备注：</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>是否比赛判负：</div>
            </td>
          </tr>
          <tr>
            <td>
              <div>是否退赛：</div>
            </td>
          </tr>
          <tr>
            <td style={{ border: 'none' }}>
              <div>裁判签名：</div>
            </td>
            <td style={{ border: 'none' }}>
              <div>判罚时间：</div>
            </td>
          </tr>
        </table>
      );
    };

    return () => (
      <div class='spread-page opcards-sheet-page'>
        <div class={'page-title-area'}>
          <div class={'image'}>
            <img src={`${setting.imgUrlCdn}yingdiimg/gadgets/opcards/sheet-logo.png`} alt='' />
          </div>
          <div class={'date'}>
            <div>该场比赛编号：</div>
            <div class='text-center'>比赛日期：</div>
          </div>
          <h1>航海王卡牌对战 专用卡表</h1>
        </div>
        <div class={'info-area flex justify-between'}>
          <table>
            <tr>
              <td>
                <div>姓名/ID：</div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
            <tr>
              <td>
                <div>联系方式：</div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
          </table>
          <table>
            <tr>
              <td>
                <div>活动名：</div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
            <tr>
              <td>
                <div>小程序编号：</div>
              </td>
              <td>
                <div></div>
              </td>
            </tr>
          </table>
        </div>
        <div class='mail-card-area'>
          <div class={'main-title'}>主卡组</div>
          <div class={'flex'}>
            {/*@ts-ignore*/}
            <MainTable1 class={'flex-1'} />
            {/*@ts-ignore*/}
            <MainTable2 class={'flex-1'} />
          </div>
        </div>
        <div class={'other-area'}>
          <LeaderTable />
          <NumsTable />
          <p>*请清楚填写官方卡名和卡牌编号</p>
          <RefereeTable />
        </div>
      </div>
    );
  },
});
